<template>
	<view class="container">
		<view class="square" v-if="Info.ID>0">
			<view class="title">{{Info.NickName}}</view>
			<view class="headimg">
				<image :src="Tools.GetImg(Info.HeadImg,1000)" mode="aspectFill" />
				<view class="isidentify" v-if="Info.IsIdentify==1"><image src="https://yuehuiba.qiyedaishu.com/img/isidentify2.png?v=1"/></view>
				<template v-if="Info.RIsOnline==0">
				<view class="online1"></view>
				<view class="online2">线下</view>
				</template>
				<template v-else>
				<view class="online3"></view>
				<view class="online4">线上+线下</view>
				</template>
			</view>
			<view class="line"><view class="name">昵称</view><view class="value">{{Info.NickName}}</view></view>
			<view class="line"><view class="name">性别</view><view class="value">{{Info.Sex}}</view></view>
			<view class="line"><view class="name">年龄</view><view class="value">{{Info.Age}}岁</view></view>
			<template v-if="Info.ID==MatcherID">
			<view class="line"><view class="name">微信号</view><view class="value">{{Info.WeiXin}}</view></view>
			<view class="line"><view class="name">手机号码</view><view class="value">{{Info.Mobile}}</view><view class="mobile" @click="OpenCall(Info.Mobile)"><image src="/static/dianhua.png"/></view></view>
			</template>
			<view class="line"><view class="name">学历</view><view class="value">{{Info.Education}}</view></view>
			<view class="line"><view class="name">是否是党员</view><view class="value">{{Info.RParty}}</view></view>
			<view class="line"><view class="name">所在区域</view><view class="value">{{Info.RLivePlace}}</view></view>			
			<view class="line"><view class="name2">个人荣誉</view><view class="value2">{{Info.RHonor==""?"未填写":Info.RHonor}}</view></view>
			<view class="line"><view class="name2">个人特长</view><view class="value2">{{Info.RTalent==""?"未填写":Info.RTalent}}</view></view>
			<view class="line"><view class="name2">志愿宣言</view><view class="value2">{{Info.RDeclaration==""?"未填写":Info.RDeclaration}}</view></view>
			<view class="line"><view class="name2">红娘介绍</view><view class="value2">{{Info.RBrief==""?"未填写":Info.RBrief}}</view></view>
		</view>
		<view class="square">
			<view class="title">对{{Info.Sex=='男'?'他':'她'}}的评价</view>
			<view class="context">
				<view class="list border-b" v-for="evaluate in EvaluateList">
					<view class="headimg" @click="UserInfo(evaluate.UserID,evaluate.Role)"><image :src="Tools.GetImg(evaluate.HeadImg,200)" mode="aspectFill"/></view>
					<view class="right">
						<view class="nickname">{{evaluate.NickName}}</view>
						<view class="rowline"><view class="star"><htz-rate :value="evaluate.Score" :size="30" :gutter="10" readonly="true" @change="UserScoreChange"></htz-rate></view><view class="from">来自：{{evaluate.Role==0?"用户":"红娘"}}</view></view>
						<view class="text">{{evaluate.Context}}</view>
					</view>
				</view>
				<template v-if="EvaluateList.length==0">
					<view class="nodata"></view>
					<view class="loadmore">还没有任何评价</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShareAppMessage: function() {
			var UserID = uni.getStorageSync("UserID");
		    return {
		      title: this.Info.NickName,
		      path: "pages/matcher/matcherinfo?ParentID="+UserID+"&ID="+this.ID//这是一个路径
		    }
		},
		data() {
			return {
				ID:0,
				MatcherID:0,
				Info:{ID:0},
				EvaluateList:[],
			};
		},
		onLoad(options) {
			this.ID=options.ID;
			this.Util.SetParam(options); 
			this.Find_MatcherInfo();
		},
		methods:{
			OpenCall(Mobile){
				this.Util.AddPushCount();
				uni.makePhoneCall({
					phoneNumber: Mobile //仅为示例
				});
			},
			UserInfo(ID,Role){
				this.Util.AddPushCount();
				if(Role==0){
					uni.navigateTo({
						url:'/pages/yuehui/yuehuiinfo?ID='+ID
					})
				}else{
					uni.navigateTo({
						url:'/pages/matcher/matcherinfo?ID='+ID
					})
				}
			},
			Find_MatcherInfo(){
				var data = {};
				data.Act="Find_MatcherInfo";
				data.ID=this.ID;
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.Info = json.Data.Info;
					this.MatcherID = json.Data.MatcherID;
					this.EvaluateList = json.Data.EvaluateList;
				});
			}
		}
	}
</script>

<style lang="scss">
	.container{
		.square{width:700rpx; min-height: 800rpx; margin:0 auto; background-color: #ffffff; border-radius: 20rpx; margin-top:25rpx; margin-bottom: 35rpx; padding-top:20rpx; padding-left:40rpx; padding-right: 40rpx; padding-bottom: 20rpx;
			.tip{width:100%; height: 380rpx; line-height: 380rpx; text-align: center; font-size:30rpx; color:#696969;}
			.bind{width:300rpx; height:90rpx; line-height: 90rpx; margin:0 auto; font-size:32rpx; border-radius: 20rpx; text-align: center; background-color: #4682e9; color:#ffffff;}
			.bind:active{opacity: 0.6;}
			.title{width:100%; height:80rpx; line-height: 80rpx; text-align: center; font-size:36rpx; font-weight: bold;} 
			.headimg{width:100%; margin:0 auto; margin-top:10rpx; margin-bottom: 30rpx; position: relative; image{width:620rpx; height:620rpx; border-radius: 25rpx;}
				.isidentify{position: absolute; left:15rpx; top:15rpx; z-index: 99; image{width:100rpx; height:100rpx;}}
				.online1{width:100rpx; height:50rpx; background-color: #ffffff; position: absolute; right:15rpx; top:15rpx; opacity:0.8; border-radius: 25rpx;}
				.online2{width:100rpx; height:50rpx; line-height: 50rpx; text-align: center; font-size:30rpx; color: #fc056e; font-weight: bold; position: absolute; right:15rpx; top:15rpx;}
				.online3{width:160rpx; height:50rpx; background-color: #ffffff; position: absolute; right:15rpx; top:15rpx; opacity:0.8; border-radius: 25rpx;}
				.online4{width:160rpx; height:50rpx; line-height: 50rpx; text-align: center; font-size:30rpx; color: #fc056e; font-weight: bold; position: absolute; right:15rpx; top:15rpx;}
			}
			.line{width:100%; min-height:45rpx; line-height: 45rpx; margin:0 auto; margin-top: 10rpx; margin-bottom: 15rpx; display: flex; flex-direction: row; flex-wrap: wrap; font-size:32rpx;
				.name{width:220rpx; color:#000000;}
				.value{flex:1; color:#a4a4a4;}
				.name2{width:100%; color:#000000;}
				.value2{width:100%; color:#a4a4a4; padding-top:0rpx; padding-bottom: 15rpx;}
				.mobile{width:50rpx; height: 50rpx; margin-top:-7rpx; border-radius: 25rpx; padding:5rpx; background-color: #4682e9; image{width:40rpx; height: 40rpx;}}
			}
			.list{width:100%; height:auto; padding-top:20rpx; padding-bottom: 15rpx; display: flex; flex-direction: row;
				.headimg{width:80rpx; height:80rpx; margin-top:0rpx; image{width:100%;height:100%; border-radius: 10rpx;}}
				.right{flex:1; padding-left:20rpx;
					.nickname{width:100%; height:30rpx; line-height: 30rpx; color:#000000; font-size:32rpx;}
					.rowline{width:100%; height:50rpx; display: flex; flex-direction: row;
						.star{width:200rpx; height:50rpx; padding-top:10rpx;}
						.from{flex:1; height: 50rpx; line-height: 50rpx; color:#757cfe; font-size:30rpx; text-align: right;}
					}
					.text{width:100%; height:auto; color:#575757; font-size:30rpx;}
				}
			}
		}
	}
</style>
